<template>
  <div id="box">
    <h3>{{ id ? '编辑' : '新建'}}英雄</h3>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-tabs value="basic" type="border-card">
        <el-tab-pane label="基本信息" name="basic">
          <el-form-item label="名称">
            <el-input v-model="model.name" />
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :headers="getAuthHeaders()"
                :show-file-list="false"
                :on-success="afterUploadAvatar">
              <img v-if="model.avatar" :src="model.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="海报">
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :headers="getAuthHeaders()"
                :show-file-list="false"
                :on-success="afterUploadBanner">
              <img v-if="model.banner" :src="model.banner" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="称号">
            <el-input v-model="model.nickname" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="model.categories" multiple>
              <el-option 
                  v-for="item in categories" :key="item._id" 
                  :label="item.name" :value="item._id" />
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-rate :max="9" :min="0" show-score v-model="model.scores.difficult" />
          </el-form-item>
          <el-form-item label="技能">
            <el-rate :max="9" :min="0" show-score v-model="model.scores.skills" />
          </el-form-item>
          <el-form-item label="攻击">
            <el-rate :max="9" :min="0" show-score v-model="model.scores.attack" />
          </el-form-item>
          <el-form-item label="生存">
            <el-rate :max="9" :min="0" show-score v-model="model.scores.survive" />
          </el-form-item>
          <el-form-item label="顺风出装">
            <!-- v-model 绑定数据库中的 items1 -->
            <el-select v-model="model.items1" multiple>
                  <!-- items 表示从服务器获取并赋值的数据(所有装备的集合) -->
              <el-option 
                  v-for="item in items" :key="item._id" 
                  :label="item.name" :value="item._id" />
            </el-select>
          </el-form-item>
          <el-form-item label="逆风出装">
            <!-- v-model 绑定数据库中的 items2 -->
            <el-select v-model="model.items2" multiple>
              <el-option 
                  v-for="item in items" :key="item._id" 
                  :label="item.name" :value="item._id" />
            </el-select>
          </el-form-item>
          <el-form-item label="使用技巧">
            <el-input type="textarea" v-model="model.usageTips" />
          </el-form-item>
          <el-form-item label="对抗技巧">
            <el-input type="textarea" v-model="model.battleTips" />
          </el-form-item>   
          <el-form-item label="团战思路">
            <el-input type="textarea" v-model="model.tramTips" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="技能介绍" name="skills">
          <el-button type="primary" size="mini" @click="addSkill">
            <i class="el-icon-plus"></i>添加技能
          </el-button>
          <el-row type="flex">
            <el-col v-for="(item, index) in model.skills" :key="index">
              <el-form-item label="名称" size="mini">
                <el-input v-model="item.name"/>
              </el-form-item>
              <el-form-item label="冷却值" size="mini">
                <el-input v-model="item.delay"/>
              </el-form-item>
              <el-form-item label="消耗值" size="mini">
                <el-input v-model="item.cost"/>
              </el-form-item>
              <el-form-item label="图标">
                <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :headers="getAuthHeaders()"
                    :show-file-list="false"
                    :on-success="res => $set(item, 'icon', res.url)">  
                  <img v-if="item.icon" :src="item.icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="描述" size="mini">
                <el-input type="textarea" v-model="item.description" />
              </el-form-item>
              <el-form-item label="小提示" size="mini">
                <el-input type="textarea" v-model="item.tips" />
              </el-form-item>
              <el-form-item>
                <el-button type="danger" size="mini" @click="delSkill(index)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane> 
        <el-tab-pane label="英雄关系" name="heroRalation">
          <el-button type="primary" size="mini" @click="model.partners.push({})">
            <i class="el-icon-plus"></i>添加英雄
          </el-button>
          <el-row type="flex">
            <el-col v-for="(item, index) in model.partners" :key="index">
              <el-form-item label="英雄" size="mini">
                <el-select v-model="item.hero" filterable>
                  <el-option v-for="hero in heros" :key="hero._id" :value="hero._id" :label="hero.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="描述" size="mini">
                <el-input type="textarea" v-model="item.description" />
              </el-form-item>
              <el-form-item>
                <el-button type="danger" size="mini" @click="delPartners(index)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane> 
      </el-tabs>
           

      <el-form-item class="save">
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Hero',
  props: {
    id: { type: String }
  },
  data() {
    return {
      // 英雄所属分类
      categories: [],
      // 顺风出装
      items: [],
      // 列出所有英雄
      heros: [],
      // 数据模型
      model: {
        name: '',
        avatar: '',
        banner: '',
        scores: {
          difficult: 0,
          skills: 0,
          attack: 0,
          survive: 0,
        },
        skills: [],
        partners: []
      },
    }
  },
  methods: {
    afterUploadAvatar(res) {
      // Vue 中 显示赋值 (当变量 model 对象中没有定义 avatar 属性时)
      // this.$set(this.model, 'avatar', res.url);

      this.model.avatar = res.url
    },
    afterUploadBanner(res) {
      this.model.banner = res.url
    },
    //修改 、 创建列表 
    async save() {
      try {
        let res
        // 修改分类
        if (this.id) {
          res = await this.$http.put(`/rest/heros/${this.id}`, this.model);
          this.$message({
            type: 'success',
            message: "修改成功"
          })
        } else {
          // 创建分类
          res = await this.$http.post('/rest/heros', this.model);
          this.$message({
            type: 'success',
            message: "创建成功"
          })
        }
        console.log(res);
        this.$router.push('/heros/list');
      } catch(err) {
        console.log(err);
      }
    },

    // 获取详情列表（某一个） 
    async fetch() {
      try {
        const res = await this.$http.get(`/rest/heros/${this.id}`);
        // this.model = res.data  表示 res.data 直接覆盖 this.model 的内容
        // this.model = res.data

        // 在 this.model 中逐个添加数据，而不是覆盖
        this.model = Object.assign({}, this.model, res.data);
      } catch(err) {
        console.log('修改列表失败');
      }
    },

    // 获取英雄分类列表 categories
    async getCategories() {
      try {
        const res = await this.$http.get('/rest/categories');
        this.categories = res.data
      } catch(err) {
        console.log('获取英雄分类列表失败');
        console.log(err);
      }
    },

    // 获取出装列表
    async getItems() {
      try {
        const res = await this.$http.get('/rest/items');
        this.items = res.data
      } catch(err) {
        console.log('获取顺风出装列表失败');
        console.log(err);
      }
    },
    // 获取所有英雄列表 
    async getHeros() {
      try {
        const res = await this.$http.get('/rest/heros');
        console.log(res.data);
        this.heros = res.data
      } catch(err) {
        console.log('获取所有英雄列表失败');
        console.log(err);
      }
    },

    // 添加技能
    addSkill() {
      this.model.skills.push({})
    },
    // 删除技能
    delSkill(index) {
      this.model.skills.splice(index, 1);
    },

    // 添加英雄关系
    addPartners() {
      this.model.partners.push({})
    },
    // 删除英雄关系
    delPartners(index) {
      this.model.partners.splice(index, 1);
    }
  },
  created() {
    this.id && this.fetch();
    this.getCategories();
    this.getItems();
    this.getHeros();
  }
}
</script>

<style>
  .el-rate {
    margin-top: 10px;
  }

  /* [保存] */
  .save {
    margin-top: 20px;
    float: right;
  }
</style>